/* eslint-disable */
<template>
  <div class="daily">
    <div class="daily-menu">
      <div class="daily-menu-item"
           @click="handleToRecommend"
        :class ='{on: type === "recommend"}'
      >每日推荐</div>
      <div class="daily-menu-item"
           :class ='{on: type === "daily"}'
           @click = "changeThemes"
      >主题日报</div>
      <ul v-show="showThemes">
        <li v-for="item in themes" >
          <a :class="{on: item.id === themeId && type === 'daily'}"
            @click = 'handleToTheme(item.id)'
          >{{item.name}}</a>
        </li>
      </ul>
    </div>


    <div class="daily-list" ref="list" @scroll="handleScroll"
    >
      <template v-if="type==='recommend'">
        <div v-for="list in recommendList">
          <div class="daily-date">{{formatDay(list.date)}}</div>
          <Item
          v-for="item in list.stories"
          :key = 'item.id'
          :data = 'item'
          @click.native = "handleClick(item.id)"
          >

          </Item>
        </div>
      </template>
      <template v-if="type==='daily'">
        <item
          v-for="item in list"
          :key = "item.id"
          :data="item"
          @click.native = "handleClick(item.id)"
        ></item>

      </template>
    </div>
    <daily-article :id = 'articleId'>
    </daily-article>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Item from './components/item'
import dailyArticle from './components/daily-article.vue';
import $ from './libs/util'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Item,
    "daily-article":dailyArticle
  },
  data: function () {
    return {
      themes: [],
      showThemes: false,
      type: 'recommend',
      themeId: 0,
      isLoading: false,
      dailyTime: $.getTodayTime(),
      list : [],
      recommendList: [],
      articleId : 0
    }
  },
  methods: {
    getThemes: function () {
      $.ajax.get('themes').then(res => {
        this.themes = res.others
      })
    },
    changeThemes(){
      this.showThemes = !this.showThemes;
      console.log('change showThemes: ', this.showThemes)
    },
    handleToTheme(itemId)
    {
      this.type = 'daily';
      this.themeId = itemId;
      this.list = [];
      $.ajax.get('theme/'+itemId).then(res => {
        this.list = res.stories.filter(item => item.type !==1)
      })
    },
    handleToRecommend(){
      this.type = 'recommend';
      this.recommendList = [];
      this.dailyTime = $.getTodayTime();
      this.getRecommendList();
    },
    getRecommendList()
    {
      this.isLoading = true;
      const preDay = $.preDay(this.dailyTime + 86400000);
      $.ajax.get('news/before/'+preDay).then(res => {
        this.recommendList.push(res);
        this.isLoading = false;
      })
    },
    formatDay (date) {
      let month = date.substr(4, 2);
      let day = date.substr(6, 2);
      if (month.substr(0, 1) === '0') month = month.substr(1, 1);
      if (day.substr(0, 1) === '0') day = day.substr(1, 1);
      return `${month} 月 ${day} 日`;
    },
    handleScroll()
    {
      const $list = this.$refs.list;
      if (this.type==='daily' || this.isLoading) return ;
      if ( $list.scrollTop + document.body.clientHeight >= $list.scrollHeight)
      {
        this.dailyTime -= 86400000;
        this.getRecommendList();
      }
    },
    handleClick(id)
    {
      this.articleId = id;
    }

  },
  mounted: function () {
    this.getRecommendList();
    this.getThemes();
  }
}
</script>
